<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="${pageContext.request.contextPath}/users/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${pageContext.request.contextPath}/users/js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--menu-->
<script src="${pageContext.request.contextPath}/users/js/scripts.js"></script>
<link href="${pageContext.request.contextPath}/users/css/styles.css" rel="stylesheet">
<!--//menu-->
<!--theme-style-->
<link href="${pageContext.request.contextPath}/users/css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Real Home Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- slide -->
<script src="${pageContext.request.contextPath}/users/js/responsiveslides.min.js"></script>
   <script>
    $(function () {
      $("#slider").responsiveSlides({
      	auto: true,
      	speed: 500,
        namespace: "callbacks",
        pager: true,
      });
    });
  </script>
</head>
<body >
<!--header-->
	<div class="navigation">
			<div class="container-fluid">
				<nav class="pull">
					<ul>
						<li><a  href="${pageContext.request.contextPath}/users/jsp/index.jsp">主页</a></li>
						<li><a  href="about.html">关于我们</a></li>
						<li><a  href="terms.html">团队</a></li>
						<li><a  href="contact.html">联系方式</a></li>
						<li><a  href="${pageContext.request.contextPath}/admin/jsp/admin-login.jsp">后台管理</a></li>
					</ul>
				</nav>			
			</div>
		</div>

<div class="header">
	<div class="container">
		<!--logo-->
			<div class="logo">
				<h1><a href="${pageContext.request.contextPath}/users/jsp/index.jsp">优购房</a></h1>
			</div>
		<!--//logo-->
		<div class="top-nav">
			<ul class="right-icons">
				<li><span ><i class="glyphicon glyphicon-phone"> </i>联系方式:666-6666666</span></li>
							<c:if test="${u.userAccount == null}">
								<li><a href='UserLogin.jsp'><i class='glyphicon glyphicon-user'></i>登录/注册</a></li>
							</c:if>
							<c:if test="${u.userAccount != null}">
								<li><a  href='${pageContext.request.contextPath}/users/jsp/MyJsp.jsp'><i class='glyphicon glyphicon-user'></i>${u.userAccount}</a></li>
							</c:if>		
				<li><a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i> </a></li>
				
			</ul>
			<div class="nav-icon">
				<div class="hero fa-navicon fa-2x nav_slide_button" id="hero">
						<a href="#"><i class="glyphicon glyphicon-menu-hamburger"></i> </a>
					</div>	
				<!---
				<a href="#" class="right_bt" id="activator"><i class="glyphicon glyphicon-menu-hamburger"></i>  </a>
			--->
			</div>
		<div class="clearfix"> </div>
			<!---pop-up-box---->
			   
				<link href="${pageContext.request.contextPath}/users/css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
				<script src="${pageContext.request.contextPath}/users/js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!---//pop-up-box---->
				<div id="small-dialog" class="mfp-hide">
					    <!----- tabs-box ---->
				<div class="sap_tabs">	
				     <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
						  <ul class="resp-tabs-list">
						  	  <li class="resp-tab-item " aria-controls="tab_item-0" role="tab"><span>All Homes</span></li>
							  <li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>For Sale</span></li>
							  <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>For Rent</span></li>
							  <div class="clearfix"></div>
						  </ul>				  	 
						  <div class="resp-tabs-container">
						  		<h2 class="resp-accordion resp-tab-active" role="tab" aria-controls="tab_item-0"><span class="resp-arrow"></span>All Homes</h2><div class="tab-1 resp-tab-content resp-tab-content-active" aria-labelledby="tab_item-0" style="display:block">
								 	<div class="facts">
									  	<div class="login">
											<input type="text" value="Search Address, Neighborhood, City or Zip" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search Address, Neighborhood, City or Zip';}">		
									 		<input type="submit" value="">
									 	</div>        
							        </div>
						  		</div>
							     <h2 class="resp-accordion" role="tab" aria-controls="tab_item-1"><span class="resp-arrow"></span>For Sale</h2><div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
									<div class="facts">									
										<div class="login">
											<input type="text" value="Search Address, Neighborhood, City or Zip" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search Address, Neighborhood, City or Zip';}">		
									 		<input type="submit" value="">
									 	</div> 
							        </div>	
								 </div>									
							      <h2 class="resp-accordion" role="tab" aria-controls="tab_item-2"><span class="resp-arrow"></span>For Rent</h2><div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
									 <div class="facts">
										<div class="login">
											<input type="text" value="Search Address, Neighborhood, City or Zip" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search Address, Neighborhood, City or Zip';}">		
									 		<input type="submit" value="">
									 	</div> 
							         </div>	
							    </div>
					      </div>
					 </div>
					 <script src="${pageContext.request.contextPath}/users/js/easyResponsiveTabs.js" type="text/javascript"></script>
				    	<script type="text/javascript">
						    $(document).ready(function () {
						        $('#horizontalTab').easyResponsiveTabs({
						            type: 'default', //Types: default, vertical, accordion           
						            width: 'auto', //auto or any width like 600px
						            fit: true   // 100% fit in a container
						        });
						    });
			  			 </script>	
				</div>
				</div>
				 <script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
																						
						});
				</script>
					
	
		</div>
		<div class="clearfix"> </div>
		</div>	
</div>
<!--//-->	
	<div class=" header-right">
		<div class=" banner">
			 <div class="slider">
			    <div class="callbacks_container">
			      <ul class="rslides" id="slider">		       
					 <li>
			          	 <div class="banner1">
			           		<div class="caption">
					          	<h3><span>vivam</span>us site</h3>
					          	<p>Nunc dignissim risus idi</p>									  	      
			          		</div>
			          	</div>
			         </li>
			      </ul>
			  </div>
			</div>
		</div>
	</div>
	 
	<!--header-bottom-->
	<div class="banner-bottom-top">
			<div class="container">
			<center>
			<div class="bottom-header">
				<div class="header-bottom">
					<div class=" bottom-head">
						<a href="${pageContext.request.contextPath}/houseDeal/buy.do">
							<div class="buy-media">
								<i class="buy"> </i>
								<h6>买房</h6>
							</div>
						</a>
					</div>
					<div class=" bottom-head">
						<a href="${pageContext.request.contextPath}/house/getAllAgent.do">
							<div class="buy-media">
								<i class="sell"> </i>
								<h6>卖房</h6>
							</div>
						</a>
					</div>
					<div class=" bottom-head">
						<a href="${pageContext.request.contextPath}/houseDeal/divRent.do">
							<div class="buy-media">
							<i class="rent"> </i>
							<h6>合租</h6>
							</div>
						</a>
					</div>
					<div class=" bottom-head">
						<a href="${pageContext.request.contextPath}/houseDeal/totalRent.do">
							<div class="buy-media">
							<i class="loan"> </i>
							<h6>整租</h6>
							</div>
						</a>
					</div>
					<div class=" bottom-head">
						<a href="${pageContext.request.contextPath}/users/jsp/faqs.jsp">
							<div class="buy-media">
							<i class="ask"> </i>
							<h6>常见问题</h6>
							</div>
						</a>
					</div>
					<div class=" bottom-head">
						<a href="dealers.html">
							<div class="buy-media">
							<i class="mobile"> </i>
							<h6>移动端</h6>
							</div>
						</a>
					</div>
					<div class=" bottom-head">
						<a href="${pageContext.request.contextPath}/ifagentLogin.do">
							<div class="buy-media">
							<i class="dealer"> </i>
							<h6>中介</h6>
							</div>
						</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<center>
			</div>
	</div>
	</div>
			<!--//-->
				
	<!--//header-bottom-->
	
	
<!--//header-->
<!--content-->
<div class="content">
	<div class="content-grid">
		<div class="container">
			<h3>最受欢迎</h3>
			<!-- 数据 -->
			<div id = "info"></div>
			<!--  
			  <div class="col-md-4 box_2">
		     	 <a href="single.html" class="mask">
			     	   	<img class="img-responsive zoom-img" src="${pageContext.request.contextPath}/users/image/pc5.jpg" alt="">
			     	   	<span class="four">40,000￥</span>
			     	 </a>
		     	   <div class="most-1">
			     	   	<h5><a href="single.html">Contrary to popular</a></h5>
			     	    	<p>别墅</p>
			     	   </div>
		     	
		      </div>
			  <div class="col-md-4 box_2">
		     	 <a href="single.html" class="mask">
			     	   	<img class="img-responsive zoom-img" src="${pageContext.request.contextPath}/users/image/pc3.jpg" alt="" >
			     	   	<span class="four">40,000￥</span>
			     	 </a>
		     	   <div class="most-1">
			     	   	 <h5><a href="single.html">Contrary to popular</a></h5>
			     	    	<p>套房</p>
			     	   </div>
		     	
		      </div>
		 	<div class="clearfix"> </div>
		</div>
		<div class="container">
		    <div class="col-md-4 box_2">
		     	 <a href="single.html" class="mask">
		     	   	<img class="img-responsive zoom-img" src="${pageContext.request.contextPath}/users/image/pc4.jpg" alt="">
		     	   	<span class="four">40,000￥</span>
		      	 </a>
	     	     <div class="most-1">
	     	    	 <h5><a href="single.html">Contrary to popular</a></h5>
	     	      	 <p>公寓</p>
	     	     </div>
			 </div>
			  <div class="col-md-4 box_2">
		     	 <a href="single.html" class="mask">
			     	   	<img class="img-responsive zoom-img" src="${pageContext.request.contextPath}/users/image/pc5.jpg" alt="">
			     	   	<span class="four">40,000￥</span>
			     	 </a>
		     	   <div class="most-1">
			     	   	<h5><a href="single.html">Contrary to popular</a></h5>
			     	    	<p>别墅</p>
			     	   </div>
		     	
		      </div>
			  <div class="col-md-4 box_2">
		     	 <a href="single.html" class="mask">
			     	   	<img class="img-responsive zoom-img" src="${pageContext.request.contextPath}/users/image/pc3.jpg" alt="" >
			     	   	<span class="four">40,000￥</span>
			     	 </a>
		     	   <div class="most-1">
			     	   	 <h5><a href="single.html">Contrary to popular</a></h5>
			     	    	<p>套房</p>
			     	   </div>
		     	
		      </div>
		      -->
		 	<div class="clearfix"> </div>
		</div>
	</div>

<!--project--->
	<div class="project">
		<div class="container">
			<h3>Project Gallery</h3>
				<div class="project-top">
					<div class="col-md-3 project-grid">
						<div class="project-grid-top">
							 <a href="single.html" class="mask"><img src="${pageContext.request.contextPath}/users/image/ga.jpg" class="img-responsive zoom-img" alt=""/></a>
							 <div class="col-md1">
								 <div class="col-md2">
									 <div class="col-md3">
									 	<span class="star"> 4.5</span>
									 </div>
									 <div class="col-md4">
									 	<strong>Venice</strong>
									 	<small>50 Reviews</small>
									 </div>
									 <div class="clearfix"> </div>
								 </div>
								 <p>2, 3, 4 BHK Flats</p>
								 <p class="cost">65,000</p>
								 <a href="single.html" class="hvr-sweep-to-right more">See Details</a>
							 </div>
						</div>
					</div>
					<div class="col-md-3 project-grid">
						<div class="project-grid-top">
							  <a href="single.html" class="mask"><img src="${pageContext.request.contextPath}/users/image/ga1.jpg" class="img-responsive zoom-img" alt=""/></a>
							 <div class="col-md1">
								 <div class="col-md2">
									 <div class="col-md3">
									 	<span class="star"> 4.5</span>
									 </div>
									 <div class="col-md4">
									 	<strong>Venice</strong>
									 	<small>50 Reviews</small>
									 </div>
									 <div class="clearfix"> </div>
								 </div>
								 <p>2, 3, 4 BHK Flats</p>
								 <p class="cost">$65,000</p>
								 <a href="single.html" class="hvr-sweep-to-right more">See Details</a>
							 </div>
						</div>
					</div>
					<div class="col-md-3 project-grid">
						<div class="project-grid-top">
							  <a href="single.html" class="mask"><img src="${pageContext.request.contextPath}/users/image/ga2.jpg" class="img-responsive zoom-img" alt=""/></a>
							 <div class="col-md1">
								 <div class="col-md2">
									 <div class="col-md3">
									 	<span class="star"> 4.5</span>
									 </div>
									 <div class="col-md4">
									 	<strong>Venice</strong>
									 	<small>50 Reviews</small>
									 </div>
									 <div class="clearfix"> </div>
								 </div>
								 <p>2, 3, 4 BHK Flats</p>
								 <p class="cost">$65,000</p>
								 <a href="single.html" class="hvr-sweep-to-right more">See Details</a>
							 </div>
						</div>
					</div>
					<div class="col-md-3 project-grid">
						<div class="project-grid-top">
							  <a href="single.html" class="mask"><img src="${pageContext.request.contextPath}/users/image/ga3.jpg" class="img-responsive zoom-img" alt=""/></a>
							 <div class="col-md1">
								 <div class="col-md2">
									 <div class="col-md3">
									 	<span class="star"> 4.5</span>
									 </div>
									 <div class="col-md4">
									 	<strong>Venice</strong>
									 	<small>50 Reviews</small>
									 </div>
									 <div class="clearfix"> </div>
								 </div>
								 <p>2, 3, 4 BHK Flats</p>
								 <p class="cost">$65,000</p>
								 <a href="single.html" class="hvr-sweep-to-right more">See Details</a>
							 </div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>				
		</div>
	</div>
<!--//project-->
	</div>
<!--footer-->
<div class="footer">
	<div class="footer-bottom">
		<div class="container">
			<div class="footer-logo">
				<h2><a href="index.html">优购房</a></h2>
			</div>
			<div class="col-md-8 footer-class">
				<p >Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/"></a></p>
			</div>
		<div class="clearfix"> </div>
	 	</div>
	</div>
</div>
<!--//footer-->
</body>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url:'${pageContext.request.contextPath}/index/getLastestInfo.do',
			type:'GET',
			datatype:'json',
			success:function(data){
				var list = data.houseList;
				console.log(list.length);
				console.log(list[0].houseImg);
				for(var i = 0;i < list.length;i++)
				{
					var layout = list[i].houseLayout.split("#");
					layout = layout[0]+'室'+layout[1]+'厅'+layout[2]+'卫';
					$("#info").append("<div class='col-md-4 box_2'>\
										    <a href='${pageContext.request.contextPath}/houseDeal/buyHouseDetail.do?id="+list[i].houseId+ "' class='mask'>\
										    <img class='img-responsive zoom-img' src='"+list[i].houseImg.split("#")[0]+"' alt='' >\
										    <span class='four'>"+list[i].housePrice+"￥</span></a>\
										     <div class='most-1'>\
										    <h5><a href='single.html'>"+layout+"</a></h5>\
										    <p>"+list[i].houseDesc+"</p> \
										    </div>\
										</div>");	
				}
			}
		
		});
	
	});
</script>

</html>